<template>
  <div class="info_list">
      <div class="info_item" @click="$router.push({path:'/newsDetrails', query:{id: item.id}})" v-for="item in articleList.slice(0,3)" :key="item.id"> 
          <div class="info_item_fl">
              <img class="info_item_fl_img" :src="item.image" alt="">
          </div>
          <div class="info_item_fr">
              <h2>{{item.title}}</h2>
              <!-- <p v-html="item.content"></p> -->
              <div>
                  <span>平台发布</span>
                  <span>{{item.create_at}}</span>
              </div>
          </div>
      </div> 
  </div>
</template>

<script>
export default {
    name:'InfoList',
    props:{
        articleList:{
            type: Array,
            default: () => []
        }
    },
    mounted(){ 
    }
}
</script>

<style lang="less" scpoed>
.info_list{  
    overflow: hidden;
    .info_item{
        padding: 10px 0;
        display: flex;   
        border-bottom: 1px solid #dcdcdc;
        .info_item_fl{
            margin-right: 12px; 
            width: 120px;
            height: 130px;
            .info_item_fl_img{
                width: 100%;
                height: 100%; 
                border-radius: 10px;
            }
        }
        .info_item_fr{
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            h2 {
                color: #333;
                line-height: 24px;
                font-size: 15px;
                font-weight: 700;
            }
            p { 
                margin: 5px 0;
                line-height: 22px;
                width: 207px;
                 display: -webkit-box;/* 弹性盒模型 */
                -webkit-box-orient: vertical;/* 元素垂直居中*/
                -webkit-line-clamp: 2;/*  文字显示的行数*/
                overflow:hidden;/* 超出隐藏 */
            }
            div {
                display: flex;
                justify-content: space-between;
            }
        }
    }
}
</style>